<template>
    <div>
        <el-card class="card">
            <div class="title">
                <h2 style="text-align: center">目标任务录入</h2>
            </div>
        </el-card>
        <br />
        <el-container>
            <el-aside width="300px" style="height: 100vh">
                <el-card>
                    <!--年度查询-->
                    <el-select v-model="value" filterable @change="searchWorkOfTargetYear">
                        <el-option
                            v-for="yearTargetOption in yearTargetOptions"
                            :key="yearTargetOption.value"
                            :label="yearTargetOption.label"
                            :value="yearTargetOption.value"
                        >
                        </el-option>
                    </el-select>
                    <el-button type="primary" style="margin-left: 5px" @click="searchWorkOfTargetYear">查询</el-button>
                </el-card>
                <el-menu v-show="is_show">
                    <el-menu-item>
                        <i class="el-icon-menu"></i>
                        <span slot="title">{{ label }} C类</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main style="padding-top: 0" v-show="is_show">
                <TabC :targetYear="childYear" :targetId="childYearId"></TabC>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import yearTargetApi from '../../../../api/yearTagetApi';
import workOfYearTargetApi from '../../../../api/workOfYearTargetApi';
import workApi from '../../../../api/work';
import TabC from './TabC.vue';
export default {
    components: {
        TabC
    },
    data() {
        return {
            yearTargetOptions: [],
            is_show: false,
            value: '',
            label: '',
            childYear: '',
            childYearId: ''
        };
    },
    methods: {
        // 子组件Tabc传参数
        getTaskData(data) {
            this.taskData = data;
            console.log(this.taskData);
            toTree(this.taskData);
        },
        async getTargetYear() {
            await yearTargetApi.findAll().then((res) => {
                for (let i = 0; i < res.data.length; ++i) {
                    this.yearTargetOptions[i] = {
                        value: res.data[i].id,
                        label: res.data[i].name
                    };
                }
                this.value = this.yearTargetOptions[0].value;
                this.label = this.yearTargetOptions[0].label;
                // 强制刷新 解决有数据不渲染的问题
                this.$forceUpdate();
            });
        },
        // 根据value 获取当前的label的值
        getLabel() {
            let obj = {};
            obj = this.yearTargetOptions.find((item) => {
                return item.value == this.value;
            });
            this.label = obj.label;
        },
        // 获取C类年份的目标任务
        async searchWorkOfTargetYear() {
            this.getLabel();
            // await workOfYearTargetApi.getWorkOfYearTarget(this.value, 2).then((res) => {
            //     // this.taskData = res.data;
            //     this.is_show = true;
            // });
            // //
            // // this.childYear = '';
            this.is_show = true;
            this.TaskInfoShow();
        },
        TaskInfoShow() {
            this.childYear = this.label;
            this.childYearId = this.value;
        },
        toTree(param) {
            //没有父节点的数据
            let parents = param.filter((value) => value.level == 0);

            //有父节点的数据
            let children = param.filter(
                (value) => value.parentId !== 'undefined' && value.parentId != null && (value.level == 1 || value.level == 2)
            );
            //定义转换方法的具体实现
            let translator = (parents, children) => {
                //遍历父节点数据
                parents.forEach((parent) => {
                    //遍历子节点数据
                    children.forEach((current, index) => {
                        //此时找到父节点对应的一个子节点
                        if (current.parentId === parent.id) {
                            //对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
                            let temp = JSON.parse(JSON.stringify(children));
                            //让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
                            temp.splice(index, 1);
                            //让当前子节点作为唯一的父节点，去递归查找其对应的子节点
                            translator([current], temp);
                            //把找到子节点放入父节点的children属性中
                            typeof parent.children !== 'undefined' ? parent.children.push(current) : (parent.children = [current]);
                        }
                    });
                });
            };
            //调用转换方法
            translator(parents, children);
            //返回最终的结果
            return parents;
        }
    },
    created() {
        this.getTargetYear();
    }
};
</script>

<style scoped>
.el-tree-style {
    padding: 0px 40px;
}
.el-tree-node__label {
    color: #606266;
}
.el-tag {
    float: right;
}
.title {
    border: 1px #bcbcbc;
    width: 50%;
    margin: 0 auto;
}
.card {
    border-radius: 15px;
    width: 50%;
    margin: 0 auto;
}
.el-menu-item.is-active {
    color: #409eff;
}
.menu-buttom {
    padding-bottom: 20px;
}
.menu-click {
    cursor: pointer;
}
</style>